import styled from '@emotion/styled';
import React from 'react';
import { useTranslation } from 'react-i18next';
import AgentService from '@/modules/Agent';

const AlertBox = styled.div`
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #000000c4;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
`;

const Container = styled.div``;

const BoxWrapper = styled.div`
	width: 262px;
	height: 170px;
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #979797;
	padding: 38px 30px 30px 30px;
`;

const Label = styled.p`
	font-size: 14px;
	font-weight: 400;
	color: #2d2d2d;
	line-height: 20px;
	text-align: center;
	margin: 0;
`;

const Button = styled.button`
	width: 156px;
	height: 38px;
	background: #252b48f5;
	border-radius: 21px;
	margin-top: 24px;
	margin-left: 20px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #d7d7d7;
	line-height: 20px;
`;

interface ErrorAlertProps {
	setErrorView: (visible: boolean) => void;
	message?: string;
}

const index = (props: ErrorAlertProps) => {
	const { setErrorView, message } = props;
	const { t } = useTranslation();
	return (
		<AlertBox>
			<Container>
				<BoxWrapper>
					<Label>{message}</Label>
					<Button
						onClick={() => {
							setErrorView(false);
						}}
					>
						{t('sure')}
					</Button>
				</BoxWrapper>
			</Container>
		</AlertBox>
	);
};

export default index;
